import React from 'react'
import { MailOutlined, SettingOutlined ,AppstoreOutlined} from '@ant-design/icons';
import { useNavigate,useLocation } from 'react-router-dom';
import { Menu,Layout } from 'antd';

function getItem(label, key, icon, children, type) {
  return {
    key,
    icon,
    children,
    label,
    type,
  };
} 
    //  const [itemList,setItem]  = React.useState([])

const userList=JSON.parse(localStorage.permissions) 
console.log( userList);
userList.forEach(it => {
  it.slice(0,3)
});
const list=[{text:'首页',path:'00'},{text:'订单管理',path:'/NavPage/ddgl'},
{text:'店铺管理',level:1,children:[{text:'店铺列表',path:'1'},{text:'添加店铺',path:'2',role:['超级管理员']}]},
{text:'账号管理',level:1,children:[{text:'用户列表',path: '/NavPage/userList'},{text:'添加用户',path:'/NavPage/addUser',role:['超级管理员']}]},
]

// const items = [
//     getItem('首页', '00'),
//     getItem('订单管理', '17'),
//     getItem('店铺管理', 'sub1', <MailOutlined />, [
//     getItem('店铺列表', '1'),
//     getItem('添加店铺', '2'),
//   ]),
//     getItem('账号管理', 'sub2', <AppstoreOutlined />, [
//     getItem('todo', '/NavPage/todo'),
//     getItem('home', '/NavPage/home'),
//     getItem('添加用户', '/NavPage/addUser'),
//     getItem('用户列表', '/NavPage/userList'),
//   ])
// ];
export default function Sider(e) {
  const {role} = JSON.parse(localStorage.user)
  const items = list.map((it,index)=>{
    if (it.level==1) {
         return it= getItem(it.text, 'sub'+index+1, <MailOutlined />,it.children.filter(item=>!item.role || item.role.includes(role)).map(ite=>{
            return getItem(ite.text, ite.path)
      }))
    }else{
         return it=getItem(it.text, it.path)
    }
})
    const navigate = useNavigate();
    const location = useLocation();
    function getUrlData(str) {
      var res = str.substr(1)
      var arr = res.split('&')
      var newArr = arr.map(item => {
          return {
              [item.split('=')[0]]: item.split('=')[1] }
      })
      var obj = {}
      newArr.forEach(item => {
          obj = {...obj, ...item }
      })
      return obj
  }
    console.log("location", getUrlData(location.search),  )
    
    const { Sider} = Layout;
    const siderStyle = {
        color: '#fff',
        height:'100vh',
        backgroundColor: '#fff',
      };
    const onClick = (e) => {
         console.log('click ', e);
         const menusWithSubMenuKey = e.keyPath[1];
         navigate(e.key,{state:menusWithSubMenuKey})
      };
      return (
        <Sider style={siderStyle}>
        <Menu
          onClick={onClick}
          style={{
            width: 200,
          }}
          selectedKeys={[location.pathname]}
          defaultOpenKeys={['sub2']}
          mode="inline"
          items={items}
        />
        </Sider>
      );
}
